<template>
  <div id="userLoginView">
    <a-form
      class="login_form"
      :model="form"
      :style="{ width: '600px' }"
      @submit="handleSubmit"
    >
      <a-form-item field="userAccount" label="账号">
        <a-input
          class="input"
          v-model="form.userAccount"
          placeholder="请输入账号"
        />
      </a-form-item>
      <a-form-item field="userPassword" tooltip="请输入账号" label="密码">
        <a-input
          class="input"
          v-model="form.userPassword"
          placeholder="请输入密码"
        />
      </a-form-item>

      <a-form-item>
        <a-button html-type="submit">登陆</a-button>
        <a-button class="button" @click="router.push('/user/regist')"
          >注册
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { UserControllerService } from "../../../generated";
import store from "@/store";
import message from "@arco-design/web-vue/es/message";
import { useRouter } from "vue-router";

const router = useRouter();

const form = reactive({
  userAccount: "",
  userPassword: "",
});
const handleSubmit = async (form) => {
  const res = await UserControllerService.userLoginUsingPost(form.values);
  if (res.code === 200) {
    store.dispatch("user/getLoginUser");
    router.push({
      path: "/",
      replace: true,
    });
  } else {
    message.error(res.message);
  }
};
</script>

<style scoped>
.input {
  width: 50%;
}

.button {
  margin-left: 70px;
}

.login_form {
  display: block;
  margin: 5% 35%;
}
</style>
